import Taro, { Component, Config, showToast } from '@tarojs/taro'
import { View, Text, Image, ScrollView, Swiper, SwiperItem } from '@tarojs/components'
import './index.scss'
import { buildURL } from '../../../lib/url';

export default class Index extends Component {

  /**
   * 指定config的类型声明为: Taro.Config
   *
   * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
   * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
   * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
   */
  config: Config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount() {
  }
  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  activateLasers(e){
    console.log(e)
    let url = buildURL('../../loupannum/loupannum', {
      item: e
    })
    Taro.navigateTo({
      url:url
    })
   }

  render() {
    const banner = [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ];
    const ilsts = [{
      num: 5,
      title: "最新开盘",
      bgc: "#EE4C60"
    },
    {
      num: 24,
      title: "正在登记",
      bgc: "#F6894E"
    },
    {
      num: 6,
      title: "即将摇号",
      bgc: "#25DF98"
    },
    {
      num: 123,
      title: "即将预售",
      bgc: "#60B3F5"
    },
    {
      num: 4,
      title: "摇号剩余",
      bgc: "#6270FB"
    }];

    const liste = [{
      title: "我的摇号",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "已摇号",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "全部楼盘",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "置业顾问",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "不限购",
      icons: "../../../images/tabBar/sy.png"
    }, {
      title: "价格查询",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "贷款计算器",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "房产数据",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "地图找房",
      icons: "../../../images/tabBar/sy.png"
    },
    {
      title: "楼市文章",
      icons: "../../../images/tabBar/sy.png"
    }
    ];
    const titleList = [
      "2019年城市落户大全",
      "2019年城市购房新标准",
      "2019年城市公租房申请标准调整"
    ];

    const listFel = [{
      title: "热门推荐",
      itemlst: [{
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }, {
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }, {
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }]
    },
    {
      title: "预售推荐",
      itemlst: [{
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }, {
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }, {
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }]
    },
    {
      title: "优质推荐",
      itemlst: [{
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }, {
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }, {
        img: "../../../images/lp.jpg",
        num: "12w",
        name: "翡翠华庭",
        add: "天府新区",
        num_yd: "32w"
      }]
    }];

    const xlpList = [
      {
        img: "../../../images/lp.jpg",
        num: "8w",
        name: "翡翠华庭",
        addr: "大邑县",
        picer: "￥0.7万-0.81万",
        ztList: [
          "正在登记",
          "正在报名",
          "已摇号"
        ],
        time: "2019-03-21",
        ytnum: "8.1w"
      },
      {
        img: "../../../images/lp.jpg",
        num: "8w",
        name: "翡翠华庭",
        addr: "大邑县",
        picer: "￥0.7万-0.81万",
        ztList: [
          "正在登记",
          "正在报名",
          "已摇号"
        ],
        time: "2019-03-21",
        ytnum: "8.1w"
      },
      {
        img: "../../../images/lp.jpg",
        num: "8w",
        name: "翡翠华庭",
        addr: "大邑县",
        picer: "￥0.7万-0.81万",
        ztList: [
          "正在登记",
          "正在报名",
          "已摇号"
        ],
        time: "2019-03-21",
        ytnum: "8.1w"
      }, {
        img: "../../../images/lp.jpg",
        num: "8w",
        name: "翡翠华庭",
        addr: "大邑县",
        picer: "￥0.7万-0.81万",
        ztList: [
          "正在登记",
          "正在报名",
          "已摇号"
        ],
        time: "2019-03-21",
        ytnum: "8.1w"
      }
    ];

   

    return (
      <View>
        <ScrollView>
          <View className='view-title'>
            <View className='view-cloum' style='margin-left:10px'>
              <Image src={require('../../../images/zaobao.png')} className='img-title'></Image>
              <Text className='title-zb'>早报</Text>
            </View>
            <View className='search-title'>
              <Image src={require('../../../images/sousuo.png')} style='margin-left:10px' className='img-title'></Image>
              <Text className='text-clas'>搜索：润扬19</Text>
            </View>
            <View className='view-cloum' style='margin-right:10px'>
              <Image src={require('../../../images/fenxiang.png')} className='img-title'></Image>
              <Text className='title-zb'>分享</Text>
            </View>
          </View>
          <Swiper
            circular
            indicatorDots
            indicatorColor='#999'
            indicatorActiveColor='#bf708f'
            interval={1000}
            autoplay>
            {banner.map((item, index) => (
              <SwiperItem key={index}>
                <Image className="slide-image" mode="widthFix" src={item}></Image>
              </SwiperItem>
            ))}
          </Swiper>

          <View className='view-be'>
            {ilsts.map((item, index) => (
              <View className='view-lj' key={index} onClick={this.activateLasers.bind(this,item)}>
                <Text className='num-bg' style={'background-color:' + item.bgc}>{item.num}</Text>
                <View style='font-size:12px'>{item.title}</View>
              </View>
            ))}
          </View>

          <View className='view-conte'>
            {liste.map((item, index) => (
              <View className='view-ct' key={index} onClick={this.activateLasers.bind(this,item)}>
                <Image className="img" src={item.icons}></Image>
                <View style='font-size:12px;margin-top:5px'>{item.title}</View>
              </View>
            ))}
          </View>

          <View className='view-tt'>
            <Text className='view-tt-v'>头条</Text>
            <Swiper
              className='swip'
              circular
              interval={1000}
              vertical
              autoplay>
              {titleList.map((item, index) => (
                <SwiperItem key={index}>
                  <Text className='view-tt-si-view'>{item}</Text>
                </SwiperItem>
              ))}

            </Swiper>
          </View>

          <View className='view-item'>
            {listFel.map((item, index) => (
              <View className='itme-l' key={index}>
                <View className='view-list-one'>
                  <View className='view-list-one-s'>{item.title}</View>
                  <View className='view-li'>
                    <View>查看更多</View>
                    <Image className='right-img' src={require('../../../images/right_jt.png')} />
                  </View>
                </View>
                <View className='view-grid'>
                  {item.itemlst.map((items, index) => (
                    <View className='view-grd-itme' key={index}>
                      <View className='view-bg-img'>
                        <Image className='im-bg' mode="widthFix" src={items.img}></Image>
                        <View className='view-lt'>
                          <Image className='im-yd' src={require('../../../images/yuedu.png')}></Image>
                          <View className='view-text'>{items.num}</View>
                        </View>
                      </View>
                      <View style='font-size:13px;font-weight: 700;'>{items.name}</View>
                      <View className='view-list-ones'>
                        <View className='view-list-one-s-1'>{items.add}</View>
                        <View className='view-li'>
                          <Image className='right-img' src={require('../../../images/liuyan.png')} />
                          <View>{items.num_yd}</View>
                        </View>
                      </View>
                    </View>
                  ))}
                </View>
              </View>
            ))}
          </View>


          <Swiper
            className='swiper'
            interval={1000}
            autoplay>
            {banner.map((item, index) => (
              <SwiperItem key={index}>
                <Image src={item} className='swiper-img' />
              </SwiperItem>
            ))}
          </Swiper>

          <View className='view-zy'>
            <View className='view-tx'>优秀置业顾问推荐</View>
            <View className='view-im'>
              <Image className='im-zygw' mode="widthFix" src={require('../../../images/zygw1.png')}></Image>
              <Image className='im-zygw' mode="widthFix" src={require('../../../images/zygw2.png')}></Image>
            </View>
          </View>

          {/* <!-- 最新开盘 --> */}
          <View className='view-zx'>
            <View className='view-tx'>最新开盘</View>
            {xlpList.map((item, index) => (
              <View className='view-zxkp' key={index}>
                <View className='view-zy-itme'>
                  <View className='view-itme-im'>
                    <Image className='view-item-im-img' src={item.img}></Image>
                    <View className='view-item-im-view'>
                      <Image className='view-item-im-view-img' src='../../../images/yuedu.png'></Image>
                      <View className='view-item-im-view-tx'>{item.num}</View>
                    </View>
                  </View>
                  <View className='view-zy-vie'>
                    <View className='view-zy-name'>{item.name}</View>
                    <View className='view-zy-viel'>
                      <View className='view-zy-viel-tx'>{item.addr}</View>
                      <View className='view-zy-viel-tx2'>{item.picer}</View>
                    </View>
                    <View className='view-zy-view-zt'>
                      {item.ztList.map((items, indexs) => (
                        <View className={indexs===0?'view-zy-view-zt_tx':''||indexs===1?'view-zy-view-zt_tx1':''||indexs===2?'view-zy-view-zt_tx2':''} key={indexs}>{items}</View>
                      ))}
                    </View>
                    <View className='view-zy-viel'>
                      <View className='view-zy-view-tiem'>摇号时间:{item.time}</View>
                      <View className='view-zy-view-view'>
                        <Image className='view-item-im-view-img' src='../../../images/liuyan.png'></Image>
                        <View className='view-zy-view-view-tx'>{item.ytnum}</View>
                      </View>
                    </View>
                  </View>
                </View>
                {(index < xlpList.length-1)?<View style='width:100%;height:1px;background:#B0B1B6;margin-top:5px;'></View>:''}
              </View>
            ))}

          </View>

        </ScrollView>
      </View >
    )
  }
}
